<template>
  <div class="container">
    <div class="tableColumns">
      <div class="left-tree">
          <span class="title-span">
              <span>{{spanText}}</span>
          </span>
          <el-input
                  class="unit-search"
                  placeholder="搜索单位名称"
                  :suffix-icon="Search"
                  v-model="filterText"
          />
          <el-tree
                  ref="treeRef"
                  :current-node-key="currentNodeKey"
                  node-key="organizationId"
                  :data="companyData"
                  :props="defaultProps"
                  default-expand-all
                  :expand-on-click-node="false"
                  highlight-current
                  @node-click="handleNodeClick"
                  :check-on-click-node="true"
                  :filter-node-method="filterNode"
          >
              <template #default="{ node, data }">
                <span>
                    <span>{{ node.label }}</span>
                </span>
              </template>
          </el-tree>
      </div>
      <div class="right-columns">
          <div class="table-select">
            <span class="title-span">
              <span>{{spanText2}}</span>
            </span>
              <el-form label-position="right">
                <el-row :gutter="24">
                  <el-col :span="6">
                    <el-form-item label="姓名：" label-width="100px">
                      <el-input placeholder="请输入姓名" v-model="searchModel.name"/>
                    </el-form-item>
                  </el-col>
<!--                  <el-col :span="8">-->
<!--                    <el-form-item label="航站楼：" label-width="100px" style="display: flex; align-items: center">-->
<!--                      <el-checkbox label="T3航站楼" size="large" />-->
<!--                      <el-checkbox label="T5航站楼" size="large" />-->
<!--                    </el-form-item>-->
<!--                  </el-col>-->
                  <el-col :span="6">
                    <el-form-item label="工号：" label-width="100px">
                      <el-input placeholder="请输入工号" v-model="searchModel.staffNumber"/>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="岗位：" label-width="100px">
                      <el-select v-model="searchModel.positionId" placeholder="请选择" clearable>
                        <el-option
                            v-for="item in postList"
                            :key="item.positionId"
                            :label="item.name"
                            :value="item.positionId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="同步时间：" label-width="100px">
                      <div class="demo-range">
                        <el-date-picker
                          range-separator="至"
                          start-placeholder="开始时间"
                          end-placeholder="结束时间"
                          :default-time="defaultTime"
                          v-model="searchModel.date"
                          type="daterange"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          :popper-options="popOptions"
                        />
                      </div>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div style="justify-content: flex-end;display: flex">
                <el-button @click="searchReset">清空</el-button>
                <el-button
                  type="primary"
                  @click="searchChange"
                >查询</el-button>
              </div>
          </div>
          <div class="table-commons">
            <span class="title-span">
              <span>{{ spanText3 }}</span>
              <el-button
                type="primary"
                @click="exportFn"
                :loading="exportLoading"
                :disabled="tableData.length==0?true:false"
              >导出</el-button>
            </span>
            <table-common
              :loading="loading"
              :columns="exampleColumns"
              :pagination="pager"
              :table-data="tableData"
              size="small"
              @sort-change="sortChange"
              @current-change="currentChange"
              @size-change="sizeChange"
              stripe
              :height="'450px'"
            >
              <template #imgs="{ row }">

                  <div v-if="row.imgs&&row.imgs.length>0">
                    <span class="preview-img" @click="onPrview(row.imgs)">{{ row.imgs[0].enclosureName}}.{{ row.imgs[0].enclosureSuffix}}</span>

                  </div>
                <div v-else>
                  -
                </div>
              </template>
              <template #action="{ row }">
                <!-- 自定义操作栏示例  -->
                <el-button
                  class="link-btn"
                  link
                  type="primary"
                  @click="settingBtn(row)"
                >设置</el-button>
                <el-button
                  class="link-btn"
                  link
                  type="primary"
                  @click="qualificationsBtn(row)"
                >特种作业资质</el-button>
              </template>
            </table-common>
          </div>
      </div>
    </div>
    <!--  设置弹窗   -->
      <edit-dialog
          :centerDialogVisible="settingDialogVisible"
          tilte="设置业务"
          :key="timer"
          align-center
          :defaultButton="false"
          :width="'400'"
          @cancel="handleCancel"
      >
          <template #content>
            <el-form :model="form" :rules="rules1" ref="postionTypeFormRef">
              <el-form-item label-width="80px" label="职务" prop="newPostion">
                <el-select v-model="form.newPostion" clearable placeholder="请选择">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-form>
          </template>
          <template #custom>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" :loading="saveBtn" @click="handleTransferSubmit(postionTypeFormRef)">确定</el-button>
        </span>
          </template>
      </edit-dialog>
    <!--  特种作业资质弹窗   -->
      <edit-dialog
          :centerDialogVisible="qualificationsDialogVisible"
          tilte="编辑特种作业资质"
          :key="timer"
          align-center
          :defaultButton="false"
          :width="'600'"
          @cancel="handleCancel"
      >
          <template #content>
              <el-form :model="ruleForm" :rules="rules"  @submit.native.prevent ref="goodsTypeFormRef">
                  <el-form-item label-width="130px" label="人员姓名:" prop="parentGroup">
                      <span>{{perDetail.name}}</span>
                  </el-form-item>
                <template v-for="(item,index) in ruleForm.qualificationsBoxList">
                  <div class="qualificationsBox">
                      <el-form-item label-width="130px" label="特种作业资质:" :prop="`qualificationsBoxList[${index}][qualification]`" :rules="rules.qualification">
                        <el-select v-model="item.qualification" placeholder="请选择" clearable>
                          <el-option
                              v-for="item in postList1"
                              :key="item.value"
                              :label="item.label"
                              :value="item.label"
                          />
                        </el-select>
                          <el-icon v-if="index==0"
                              class="el-input__icon"
                              color="#427CC9"
                          @click="addQualificationsBox()">
                              <CirclePlus/>
                          </el-icon>
                        <el-icon v-else
                                 class="el-input__icon"
                                 color="#427CC9"
                                 @click="removeQualificationsBox(index)">
                          <Remove />
                        </el-icon>
                      </el-form-item>
                    <el-form-item label-width="130px" label="图片：" class="upload-img" :prop="`qualificationsBoxList[${index}][fileList]`" :rules="rules.fileList">
                      <el-upload
                          ref="uploadRef"
                          v-model:file-list="item.fileList"
                          action="/fast/uploadFile"
                          list-type="picture-card"
                          :on-success="( resp, uploadFile,uploadFiles)=>{return  handlerUploadSuccess(resp, uploadFile,uploadFiles,index)}"
                          :on-error="handlerUploadError"
                          :before-upload="handlerBeforeUpload"
                          :on-preview="handlePictureCardPreview"
                          :on-remove="(uploadFile, uploadFiles)=>{return  handleRemove(uploadFile, uploadFiles,index)}"
                          limit="10"
                          :on-exceed="handleExceed"
                          :class="{ hide: hideUpload }"
                      >
                        <el-icon>
                          <Plus />
                        </el-icon>
                      </el-upload>

                    </el-form-item>
<!--                      <el-form-item label-width="130px" label="资质附件:"  :prop="`qualificationsBoxList[${index}][qualification_annex]`" :rules="rules.qualification_annex">-->
<!--                          <el-upload class="upload-demo" ref="elUploadFile" action="#" :limit="1" :auto-upload="false" style="width: 255px;"-->
<!--                                      accept=""-->
<!--                                     :on-change="(file, file_list)=>{return handleChangeFile(file, file_list, index)}" :on-exceed="(files)=>{return handleExceed(files,index)}">-->
<!--                              <button>选择文件</button>-->
<!--                              <template #tip>-->
<!--                                  <span style="margin-left: 5px">{{item.qualification_annex.enclosureName||'未选择任何文件'}}</span>-->
<!--                              </template>-->
<!--                          </el-upload>-->
<!--                      </el-form-item>-->
                  </div>
                </template>
                 </el-form>
          </template>
          <template #custom>
            <span class="dialog-footer">
              <el-button @click="handleCancel">取消</el-button>
              <el-button type="primary" :loading="saveBtn" @click="qualificationsSubmit(goodsTypeFormRef)">保存</el-button>
            </span>
          </template>
      </edit-dialog>
    <el-dialog align-center v-model="dialogVisible" width="auto" center>
      <div>
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </div>
    </el-dialog>
    <el-image-viewer
        v-if="showViewer"
        @close="showViewer=false"
        :url-list="[dialogImageUrls]"/>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import {ElMessage, ElTree, FormInstance, FormRules, genFileId, UploadProps, UploadRawFile} from "element-plus";
import {computed, nextTick, onMounted, reactive, ref, watch} from "vue";
import TableCommon from "@/components/TableCommon/index.vue";
import editDialog from '@/components/editDialog/index.vue'
import {exampleColumns} from "./config/columns";
import {useStore} from "vuex";
import {updateProperties, getPersonLst, synsUser, updatePostion, exportFile} from "@/api/quality/schedulePerson";
import {getResource} from "@/api/resource";
import {exampleOptions} from "@/views/quality/scheduleClass/config/filters";
import {getPostList} from "@/api/quality/scheduleGroup";
import {deleteFile, uploadKonwledgeFiles} from "@/api/common";
import {scheduleClassAdd, scheduleClassEdit} from "@/api/quality/scheduleClass";
const spanText = ("组织架构")
const spanText2 = ("数据筛选")
const spanText3 = ("信息列表")
const timer = ref(); // 弹窗时间戳
const companyData = ref([]); // 左侧组织架构数据
const exportLoading = ref(false); // 导出按钮加载动画
const saveBtn = ref(false); // 确认按钮加载动画
const loading=ref(false); // 表格加载动画
// 获取组织架构
const {getters} = useStore();
const store = useStore()
const userInfo = computed(() => store.state.user.userInfo)
const goodsTypeFormRef = ref<FormInstance>()
const organizes=computed(() => getters['user/getOrganTree']);
const pager = reactive({ // 表格分页
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageCount: 0,
});
const ruleForm = ref({
  qualificationsBoxList:[{
    fileList:[],
    goodsFile:[],
    qualification:''
  }]
});
const form = ref({
  newPostion: '',
});
const rules1=reactive<FormRules>({
  newPostion:[
    {
      required:true,
      trigger:'blur',
      message: '请选择职务',
    }
  ]
})
// 特种资质表单
const rules = reactive<FormRules>({
  qualification: [
        {
            required: true,
            trigger: 'change',
          message: '请选择资质',
        },
    ],
  fileList: [
        {
            required: true,
            trigger: 'change',
          message: '请上传图片',
        },
    ]
})
const options=ref([
  {
    value: 0,
    label: '员工',
  },
  {
    value: 1,
    label: '班组长',
  },
  {
    value: 2,
    label: '科室领导',
  }
])
const postionTypeFormRef=ref<FormInstance>()
const searchModel=ref({
  createDept:'',
  name:'',
  positionId:'',
  date:'',
  staffNumber:''
})
const order = ref([
  {
    column: 'staff_number',
    method: 'desc'
  }
])
const postList=ref([])
const postList1=ref([])
const selectGroup=ref({})
const selectGroup1=ref({})
const filterText = ref('')
const treeRef = ref(null)
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.organizationName.includes(value)
}
const tableData=ref([]); // 表格数据
const defaultProps = {
    children: 'children',
    label: 'organizationName',
}; // 左侧组织架构数据回显
const defaultTime = [new Date(2000, 2, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)];//选择日期后的默认时间
const popOptions = { // 日期弹窗位置
  modifiers: [
    {
      name: 'flip',
      options: {
        fallbackPlacements: ['bottom'],
        allowedAutoPlacements: ['bottom'],
      }
    }
  ]
}
//默认选中组织目录第一个

const currentNodeKey=ref("")
const getTopOne=(data:any)=>{
    if(data.children&&data.children.length>0){
        getTopOne(data.children[0])
    }else{
        nextTick(()=>{
            currentNodeKey.value= data.organizationId
            treeRef.value.setCurrentKey(currentNodeKey.value)
           // retrievedForm.value.directoryCode = data.id;
            //retrievedForm.value.name = data.name;
            selectGroup1.value=data
            onGetList()
        })

    }
}
// 左侧组织架构节点事件
const handleNodeClick = (data) => {
    console.log(data);
  if(data.parentId==-1||(data.children&&data.children.length>0)){
    //addLoading.value=true
    selectGroup1.value={}
  }else{
    //addLoading.value=false
    selectGroup1.value=data
    pager.total=0
    pager.pageCount=0
    onGetList()
  }
}

// 查询搜索
const searchChange = (data: any) => {
  onGetList()
};

// 设置按钮
const settingDialogVisible = ref(false) // 设置弹窗是否打开
const settingBtn = (data:any) => {
    settingDialogVisible.value = true
  selectGroup.value=data
    form.value.newPostion=data.position
}
// 设置弹窗提交按钮 async await
const handleTransferSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await updatePostion({
        employeeId: selectGroup.value.staffId,
        position: form.value.newPostion,
        creator:{
          id: userInfo.value.userId,
          name: userInfo.value.name,
          userName: userInfo.value.userName,
          organId: userInfo.value.organId || '',
          organName: userInfo.value.organName || ''
        },
        updateUser:{
          id: userInfo.value.userId,
          name: userInfo.value.name,
          userName: userInfo.value.userName,
          organId: userInfo.value.organId || '',
          organName: userInfo.value.organName || ''
        }
      })
      if(res?.code ==='1'){

        ElMessage.success("设置成功")
        handleCancel()
        onGetList()
      }else{
        ElMessage.error(res?.message || '操作失败，请重试！');
        saveBtn.value = false
      }
    }
  })
}
// 特种作业资质按钮
const qualificationsDialogVisible = ref(false) // 特种作业资质弹窗是否打开
const perDetail=ref({})
const qualificationsBtn = (data:any) => {
    qualificationsDialogVisible.value = true
    perDetail.value=data
  ruleForm.value.qualificationsBoxList=[]
  if(data.properties){
    const json=JSON.parse(data.properties)
    if(json.qualifications&&json.qualifications.length>0){
      console.log(json.qualifications)
      json.qualifications.forEach(item=>{
        const urlList: { url: any; }[]=[]
        if(item.goodsFile&& item.goodsFile.length>0){
          item.goodsFile.forEach(urls=>{
            urlList.push({
              url:urls.resourceAddress
            })
          })
        }
        ruleForm.value.qualificationsBoxList.push({
          qualification:item.qualification,
          fileList:urlList,
          goodsFile:item.goodsFile})
      })
     // ruleForm.value.qualificationsBoxList=json.qualifications
    }else{
      ruleForm.value.qualificationsBoxList=[{
        qualification:"",
        fileList:[],
        goodsFile:[]
      }]
    }

  }else{
    ruleForm.value.qualificationsBoxList=[{
      qualification:"",
      fileList:[],
      goodsFile:[]
    }]
  }

}
const qualificationsSubmit =async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      saveBtn.value = true;
      let list: { qualification: string; goodsFile: never[]; }[]=[]
      ruleForm.value.qualificationsBoxList.forEach(item=>{
        list.push({
          qualification:item.qualification,
          goodsFile:item.goodsFile
        })
      })
      const properties={
        "qualifications":list
      }
      const res=await updateProperties({
        "staffId":perDetail.value.staffId ,
        "properties":JSON.stringify(properties)
      })
      if(res?.code ==='1'){

          ElMessage.success("修改成功")
        onSyns()
          handleCancel()
        }else{
        ElMessage.error(res?.message || '操作失败，请重试！');
        saveBtn.value = false
        }


    }
  })
}
const onSyns=async () => {
  const res = await synsUser(perDetail.value.staffId)
  if(res?.code ==='1'){
    handleCancel()
    onGetList()
  }else{
    ElMessage.error(res?.message || '操作失败，请重试！');
  }
}
// 列表导出
const exportFn = () =>{
  exportLoading.value = true
  const payload = {
    positionId: searchModel.value.positionId,
    name:searchModel.value.name,
    startTime:searchModel.value.date==null?'':searchModel.value.date[0],
    endTime:searchModel.value.date==null?'':searchModel.value.date[1],
    staffNumber:searchModel.value.staffNumber,
    createDept:selectGroup1.value.organizationId,
    order:order.value
  }

  exportFile(payload).then(res=>{
    exportLoading.value=false
    const fileName = "员工信息"  + ".xlsx"; // 自定义文件名
    const blob = new Blob([res], {
      type: "application/vnd.ms-excel;charset=utf-8", // 文件格式
    });
    const link = document.createElement("a"); // 创建下载链接
    link.href = URL.createObjectURL(blob);
    link.download = `${fileName}`;
    link.click();
    URL.revokeObjectURL(link.href);
    link.remove();

  }).finally(()=>{
    exportLoading.value=false;
  })
}

// 获取树形数据
const geTreeData = () => {
    companyData.value = organizes.value
    getTopOne(companyData.value[0])
}

const onGetList= async () => {
  if(selectGroup1.value.organizationId==null){
    ElMessage.info('请选择科室');
    return
  }
  loading.value = true;
  const payload = {
    pageNum: pager.currentPage,
    pageSize: pager.pageSize,
    condition: {
      positionId: searchModel.value.positionId,
      name:searchModel.value.name,
      startTime:searchModel.value.date==null?'':searchModel.value.date[0],
      endTime:searchModel.value.date==null?'':searchModel.value.date[1],
      staffNumber:searchModel.value.staffNumber,
      createDept:selectGroup1.value.organizationId,
      order:order.value,
    }
  };
  tableData.value=[]
  const res=await getPersonLst(payload)
  if (res?.code == '1') {
    if(res.data&&res.data.list.length>0){
      tableData.value = res.data.list
      tableData.value.forEach(item => {
        if(item.position==null||item.position==undefined){
          item.position=0
        }
        postList.value.forEach(item1 => {
          if (item1.positionId == item.positionId) {
            item.positionName = item1.name
          }
        })
        const json = JSON.parse(item.properties)
        const imgUrls: any[]=[]
        if(json&&json.qualifications&&json.qualifications.length>0){
          json.qualifications.forEach(res=>{
            if(res.goodsFile){
              res.goodsFile.forEach(res1=>{
                imgUrls.push(res1)
              })
            }

          })
          item.imgs=imgUrls
        }
      })
      pager.total = res.data.total;
      pager.pageCount =
          Math.ceil(pager.total / pager.pageSize) === 0
              ? 1
              : Math.ceil(pager.total / pager.pageSize);
    }
  }
  loading.value = false;


}

// 排序
const sortChange = (data: any) => {
  const method = data.order === 'ascending' ? 'asc' : 'desc'
  order.value[0].column = 'staff_number'
  order.value[0].method = method
  onGetList()
}
const currentChange = (value: number) => {
  pager.currentPage = value;
  onGetList()
};
// 分页
const sizeChange = (size: number) => {
  pager.currentPage = 1
  pager.pageSize = size
  onGetList()

};

//   清空搜索 重置列表
const searchReset = () => {
  searchModel.value.positionId=''
  searchModel.value.name=''
  searchModel.value.date=''
  searchModel.value.staffNumber=''
  tableData.value=[]
  onGetList()
};
const addQualificationsBox=()=>{
  if(ruleForm.value.qualificationsBoxList.length==10){
    ElMessage.error('最多可添加10个资质')
    return
  }
  ruleForm.value.qualificationsBoxList.push({
    qualification:"",
    fileList:[],
    goodsFile:[]
  })

}
const removeQualificationsBox=(index:number)=>{
  ruleForm.value.qualificationsBoxList.splice(index,1)
}


const handleRemove=(uploadFile, uploadFiles,index) => {
  let code = "";
  if (uploadFile.response) {
    code = uploadFile.response.data?.enclosureCode;
    delFile(code);
  } else {
    code = uploadFile.name;
  }

  hideUpload.value = false;
  const values: Array<FileFace> = [];
  ruleForm.value.qualificationsBoxList[index].goodsFile.forEach((item, index) => {
    if (item.enclosureCode !== code) {
      values.push(item);
    }
  });
  ruleForm.value.qualificationsBoxList[index].goodsFile = values;
};
const dialogImageUrl = ref("");
const dialogImageUrls= ref([]);
const dialogVisible = ref(false);
const showViewer = ref(false);
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
const onPrview=(row)=>{

  dialogImageUrls.value=[]

    row.forEach(item1=>{
      dialogImageUrls.value.push(item1.resourceAddress)
    })

  showViewer.value = true;
}
// 上传前
const handlerBeforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
  console.log(rawFile)
  const fileSuffix = rawFile.name.substring(rawFile.name.lastIndexOf('.') + 1)
  const whiteList = ['jpg', 'png', 'JPG', 'PNG']
  if (whiteList.indexOf(fileSuffix) === -1) {
    ElMessage.error('上传文件类型只能是 jpg,png,JPG,PNG格式')
    return false
  }
  if (rawFile.size > 10 * 1024 * 1024) {
    ElMessage.error('文件大小只能在10M以内')
    return false
  }
}
const elUploadFile = ref();
const hideUpload = ref(false);
const handleExceed: UploadProps["onExceed"] = (uploadFile, uploadFiles) => {
  ElMessage.error("上传文件数不能超过10个");
};
const handlerUploadSuccess = (resp,uploadFile,uploadFiles,index) => {
  console.log(resp, uploadFile, uploadFiles);
  if (resp.code === "1") {
    const item = {
      enclosureContent: resp.data.enclosureCode,
      enclosureName: resp.data.enclosureName,
      enclosureSuffix: resp.data.enclosureSuffix,
      resourceAddress: resp.data.resourceAddress,
      enclosureCode: resp.data.enclosureCode,
    };
    ruleForm.value.qualificationsBoxList[index].goodsFile.push(item);
    if (ruleForm.value.qualificationsBoxList[index].goodsFile.length >= 10) {
      hideUpload.value = true;
    }
  }
};
const handlerUploadError: UploadProps["onError"] = (
    error,
    uploadFile,
    uploadFiles
) => {
  console.log(error, uploadFile, uploadFiles);
};

const delFile = (code: string) => {
  deleteFile(code).then((res) => {
    console.log(res);
  });
};
const getFile= async (ele: any,num:number) => {
  const fileName = ele.name;
  const index = fileName.lastIndexOf('.')
  const name = fileName.slice(0, index)
  let formData = new FormData();
  formData.append('file', ele.raw)
  formData.append('fileName', name)
  formData.append('isSyncEs','false');
  let res = null;
  try {
    res = await uploadKonwledgeFiles(formData)
  } catch {
    ElMessage.error(`${name}上传失败`)
  }
  if (res?.data) {
    ruleForm.value.qualificationsBoxList[num].qualification_annex=res.data
  }
}
const onGetResource= async () => {
  const res = await getResource("tcdm_employee_qualification");
  if(res.code=='1'){
    postList1.value=res.data.properties.meta

  }
  console.log(userInfo.value)
  const res1 = await getPostList({
    state: "VALID",
    enterpriseIds: [userInfo.value.enterpriseId],
  })
  if (res1?.code === '1') {
    postList.value = res1.data
  } else {
    ElMessage.error(res1?.message);
  }
  geTreeData();
};
// 取消按钮
const handleCancel = ()=> {
    settingDialogVisible.value = false;
    qualificationsDialogVisible.value = false;
    saveBtn.value = false;
}
onMounted(()=>{

  onGetResource();

})
</script>

<style scoped lang="less">
@import url("../style/publicStyle.less");
.container {
  .el-input__icon {
    font-size: 28px;
    margin-left: 10px;
    cursor: pointer;
  }
  .qualificationsBox {
    width: 100%;
    max-height: 450px;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
    padding: 30px 10px;
    box-sizing: border-box;
    margin-bottom: 15px;
    overflow: scroll;
    .el-form-item {
      margin-bottom: 17px;
      .upload-img {
        width: 100%;
      }
    }
  }

}
</style>
